import React from 'react';
import CategoryDetailStatistics from '@/pages/DataStatistics/AnswerDetailStatis/categoryStatistics';
import KnolwedgeStatistics from '@/pages/DataStatistics/AnswerDetailStatis/knolwedgeStatistics';
import { Button, Card, Col, Form, Icon, Row, Select, Tabs, Tooltip, DatePicker } from 'antd';
import styles from '@/pages/DataStatistics/AnswerDetailStatis/index.less';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import { FormattedMessage, formatMessage } from 'umi-plugin-react/locale';
import moment from 'moment';
import { connect } from 'dva';

const { TabPane } = Tabs;

class AnswerDetailStatis extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      activeKey: '1',
      robotList: [],
      queryData: {
        fromDate: '',
        toDate: '',
        trigger: 0,
        applicationId: '0',
        current: 1,
        size: 10
      }
    }
  }

  componentWillMount() {
    let { queryData } = this.state;
    const fromDate = moment().subtract('7', 'days').format('YYYY-MM-DD');
    const toDate = moment().format('YYYY-MM-DD');
    queryData.fromDate = fromDate;
    queryData.toDate = toDate;
    this.setState({ queryData })
  }

  componentDidMount() {
    this.getRobot();
    this.CategoryDetailStatistics.getList();
  }

  /**
   * 获取所有机器人（作为筛选条件）
   */
  getRobot = () => {
    const { dispatch } = this.props;
    dispatch({
      type: 'qaAnswerStatistics/fetchRobotList',
      payload: { current: 1, size: 999999 },
      callback: res => {
        this.setState({ robotList: res })
      },
    })
  }

  /**
   * tab切换回调
   */
  tabCallback = key => {
    this.setState({ activeKey: key }, () => {
      switch (key) {
        case '1':
          this.CategoryDetailStatistics.getList();
          break;
        case '2':
          if (this.KnolwedgeStatistics) {
            this.KnolwedgeStatistics.getList();
          }
          break;
      }
    })
  }

  /**
   * 查询条件
   */
  queryByConditions = () => {
    const { form } = this.props;
    const { queryData, activeKey } = this.state;
    const info = form.getFieldsValue();
    queryData.current = 1;
    queryData.fromDate = info.time[0].format('YYYY-MM-DD');
    queryData.toDate = info.time[1].format('YYYY-MM-DD');
    queryData.trigger = info.trigger;
    queryData.applicationId = info.robotId;
    this.setState({ queryData }, () => {
      this.tabCallback(activeKey);
    })
  }

  /**
   * 分页查询
   */
  queryByPage = (page, size) => {
    let { queryData } = this.state;
    queryData.current = page;
    queryData.size = size;
    this.setState({ queryData }, () => {
      if (this.KnolwedgeStatistics) {
        this.KnolwedgeStatistics.getList();
      }
    })
  }

  /**
   * 下载
   * @returns {*}
   */
  exportRecords = () => {
    const { activeKey } = this.state;
    switch (activeKey) {
      case '1':
        this.CategoryDetailStatistics.exportCategoryRecords();
        break;
      case '2':
        this.KnolwedgeStatistics.exportKnowledgeRecords();
        break;
    }
  }

  render() {
    const { robotId, robotList, activeKey, queryData } = this.state;
    const { getFieldDecorator } = this.props.form;
    const { currentUser } = this.props;
    return (
      <div style={{ height: '100%' }}>
        <PageHeaderWrapper>
          <Card style={{ height: '100%' }}>
            <Form layout={'inline'} style={{ paddingBottom: 8 }}>
              {
                currentUser.applicationId ? null : (
                    <Form.Item>
                      {
                        getFieldDecorator('robotId', { initialValue: '0' })(
                            <Select style={{ width: 200 }} placeholder={formatMessage({ id: 'answerDetailStatis.selectApp' })}>
                              <Select.Option value={'0'}>{formatMessage({ id: 'answerDetailStatis.allApps' })}</Select.Option>
                              {
                                robotList.map(item => {
                                  return <Select.Option value={item.id} key={item.id}>{item.name}</Select.Option>
                                })
                              }
                            </Select>
                        )
                      }
                    </Form.Item>
                )
              }
              <Form.Item style={{ textAlign: 'center' }}>
                {
                  getFieldDecorator('time', {
                    initialValue: [moment().subtract('7', 'days'), moment()]
                  })(
                    <DatePicker.RangePicker allowClear={false} style={{ width: '250px' }} />
                  )
                }
              </Form.Item>
              <Form.Item>
                {
                  getFieldDecorator('trigger', { initialValue: 0 })(
                    <Select style={{ width: 200 }} placeholder={formatMessage({ id: 'answerDetailStatis.selectTrigger' })}>
                      <Select.Option value={0}>{formatMessage({ id: 'answerDetailStatis.allTriggers' })}</Select.Option>
                      <Select.Option value={1}>{formatMessage({ id: 'answerDetailStatis.clickTrigger' })}</Select.Option>
                      <Select.Option value={2}>{formatMessage({ id: 'answerDetailStatis.inputTrigger' })}</Select.Option>
                    </Select>
                  )
                }
              </Form.Item>
              <Form.Item>
                <Button type={'primary'} onClick={this.queryByConditions}>{formatMessage({ id: 'answerDetailStatis.query' })}</Button>
              </Form.Item>
              <span style={{ float: 'right' }}>
                <Form.Item style={{ margin: 0 }}>
                  <Button onClick={this.exportRecords}>{formatMessage({ id: 'answerDetailStatis.export' })}</Button>
                </Form.Item>
              </span>
            </Form>
            <Row>
              <Tabs activeKey={activeKey} onChange={this.tabCallback}>
                <TabPane tab={formatMessage({ id: 'answerDetailStatis.categoryStatistics' })} key="1">
                  <CategoryDetailStatistics robotId={robotId} onRef={ref => this.CategoryDetailStatistics = ref} queryData={queryData} />
                </TabPane>
                <TabPane tab={formatMessage({ id: 'answerDetailStatis.qaKnowledgeStatistics' })} key="2">
                  <KnolwedgeStatistics robotId={robotId} onRef={ref => this.KnolwedgeStatistics = ref} queryData={queryData} queryByPage={this.queryByPage} />
                </TabPane>
              </Tabs>
            </Row>
          </Card>
        </PageHeaderWrapper>
      </div>
    );
  }
}

export default connect(({ user }) => ({
  currentUser: user.currentUser,
}))(Form.create()(AnswerDetailStatis));
